<template>
  <main class="finish-practice-container">
    <div class="overview-box">
      <div class="flex-between">
        <div class="btn-list">
          <el-select
            v-if="taskInfo.taskType == 4"
            v-model="selectClass"
            placeholder="请选择班级"
            value-key="value"
            @change="getPracticeDetailInfo"
            style="width: 120px"
          >
            <el-option
              v-for="item in taskInfo.classList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>

          <el-button
            text
            @click="onDownLoadFile"
            v-if="taskInfo.taskType == 4 && taskInfo.fileList.length"
          >
            <img src="@/assets/images/assignment/download.png" />
            下载任务附件
          </el-button>
        </div>
      </div>
      <div class="card-list flex">
        <div
          class="card-item"
          :style="{ backgroundColor: card.bgc }"
          v-for="(card, index) in overviewList"
          :key="index"
        >
          <div class="card-info flex">
            <img :src="card.img" class="card-img" />
            <div class="info-right flex-column">
              <div>{{ card.text }}</div>
              <div :style="{ color: card.processColor }">
                <span class="rate-num">{{ card.rate }}</span>
                {{ card.unit }}
              </div>
            </div>
            <el-button
              v-if="index === 0"
              class="push-btn"
              size="small"
              @click="onTaskUrge"
              type="danger"
              >催交</el-button
            >
            <el-button
              v-if="index === 3 && card.list[1]?.num > 0"
              class="push-btn correct-btn"
              size="small"
              @click="toCorrect(task)"
              type="danger"
              >批改</el-button
            >
          </div>
          <el-progress
            :percentage="Number(card.rate)"
            :stroke-width="4"
            :color="card.processColor"
            text-inside
          >
            <span></span>
          </el-progress>
          <div
            class="card-bottom flex-between"
            :style="{ color: card.processColor }"
          >
            <span
              >{{ card.list[0]?.text }} {{ card.list[0]?.num }}
              {{ card.list[0]?.unit }}</span
            >

            <el-popover
              v-if="index === 0 || index === 3"
              placement="top-start"
              trigger="hover"
              popper-class="pop-class"
            >
              <template #default>
                <div class="student-list flex-start">
                  <div
                    class="student-item"
                    v-for="(student, sIndex) in card.list[1]?.list"
                    :key="sIndex"
                  >
                    {{ student.student_name }}
                  </div>
                </div>
                <div v-if="!card.list[1]?.list.length">暂无学生</div>
              </template>
              <template #reference>
                <span class="hover"
                  >{{ card.list[1]?.text }} {{ card.list[1]?.num }}</span
                >
              </template>
            </el-popover>

            <span v-else
              >{{ card.list[1]?.text }} {{ card.list[1]?.num }}
              {{ card.list[1]?.unit }}</span
            >
          </div>
        </div>
      </div>

      <!-- 习题任务显示柱状图 -->
      <div ref="practiceChart" class="practice-chart"></div>
    </div>
    <!-- 题目列表 -->
    <div class="question-box">
      <el-empty description="暂无题目数据" v-if="!questionList.length">
      </el-empty>
      <template v-else>
        <div class="question-index flex">
          <div @click="goComment" class="comment">
            <img src="@/assets/images/assignment/comment-icon.svg?url" />
          </div>
          <div
            class="index-item hover"
            v-for="(question, index) in questionList"
            :class="[
              `index-item-${question.status}`,
              index === curQuestionIndex &&
                `index-item-${question.status}-active`
            ]"
            :key="index"
            @click="onClickQuestionIndex(index)"
          >
            {{ question.showIndex }}
          </div>
        </div>
        <template v-if="curQuestionInfo">
          <div class="question-detail-box flex-between">
            <div class="box-left">
              <AssignTopic
                @onShowOneTwoThree="onShowOneTwoThree"
                :topic-data="TopicData"
                :index="questionList[curQuestionIndex].showIndex"
                :show-head="true"
                :is-one-two-three="isTopicOne"
              />
            </div>

            <div class="box-right">
              <div class="flex-between">
                <div class="font-weight">作答统计</div>
                <div>
                  <el-button :icon="LIST" @click="onOpenDetail"
                    >作答详情</el-button
                  >
                </div>
              </div>
              <el-divider class="border" />
              <div
                class="first-question"
                v-if="
                  curQuestionInfo.question_detail.subproblem?.length > 0 &&
                  curQuestionSubIndex === -1
                "
              >
                暂只支持小题统计，请切换小题查看统计
              </div>
              <ProcessList v-else :sum="sum" :process-list="processList" />
            </div>
          </div>
        </template>
      </template>
    </div>
    <el-drawer
      v-model="drawerVis"
      direction="rtl"
      class="finish-drawer"
      size="40%"
    >
      <el-table :data="answerList" @selection-change="onSelectStudent">
        <el-table-column type="selection" />
        <el-table-column prop="student_name" label="姓名" />
        <el-table-column prop="score_rate" label="正确率">
          <template #default="scope">
            <div v-if="scope.row.teacher_correct === -1">--</div>
            <div
              v-else
              :style="{
                color: getColorByNum(handleRate(scope.row.score_rate))
              }"
            >
              {{ handleRate(scope.row.score_rate) }}%
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="response" label="答案">
          <template #default="scope">
            <span v-if="!scope.row.response && scope.row.response_url">--</span>
            <div
              v-else-if="curQuestionSubIndex === -1"
              :class="scope.row.showMore ? '' : 'answer-column'"
              v-html="
                getNormalizeData(
                  JSON.parse(scope.row.response),
                  getParseData(curQuestionInfo.question_detail)
                )
              "
            ></div>
            <div
              v-else
              :class="scope.row.showMore ? '' : 'answer-column'"
              v-html="
                getNormalizeData(
                  JSON.parse(scope.row.response),
                  getParseData(
                    curQuestionInfo.question_detail.subproblem[
                      curQuestionSubIndex
                    ]
                  )
                )
              "
            ></div>
            <template v-if="scope.row.response_url">
              <img
                class="hover"
                v-for="(url, index) in JSON.parse(scope.row.response_url)"
                @click="
                  onShowPreview(JSON.parse(scope.row.response_url), index)
                "
                :src="url"
                :key="index"
              />
            </template>
            <!-- <el-button class="show-more-btn hover" @click="scope.row.showMore = !scope.row.showMore">{{ scope.row.showMore ? '关闭答案' : '展示更多' }}</el-button> -->
          </template>
        </el-table-column>
        <el-table-column prop="evaluate" label="批注">
          <template #default="scope">
            <div
              v-if="
                scope.row.teacher_evaluate ||
                !['', '[]'].includes(scope.row.teacher_evaluate_url)
              "
            >
              {{ scope.row.teacher_evaluate }}
              <template v-if="scope.row.teacher_evaluate_url">
                <img
                  class="hover"
                  v-for="(url, index) in JSON.parse(
                    scope.row.teacher_evaluate_url
                  )"
                  @click="
                    onShowPreview(
                      JSON.parse(scope.row.teacher_evaluate_url),
                      index
                    )
                  "
                  :src="url"
                  :key="index"
                />
              </template>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="flex-between">
          <span>已选：{{ selectStudentList.length }}人</span>
          <el-button
            type="primary"
            @click="createVisible = true"
            :disabled="!selectStudentList.length"
            >创建靶向班</el-button
          >
        </div>
      </template>
    </el-drawer>

    <create-target-class
      :visible="createVisible"
      :studentList="selectStudentList"
      :schoolId="userInfo.school_id"
      :teacherId="userInfo.userId"
      @close="handleClose"
    />
    <ImagePreview
      v-if="isShowImagePreview"
      v-model:isShow="isShowImagePreview"
      :current-index="imageIndex"
      :img-list="imagesUrl"
    />
    <!-- 举一反三 -->
    <OneWinThreeDrawer
      v-if="isShowOne"
      v-model:isShow="isShowOne"
      :question="curQuestionInfo"
      @getOneThreeInfo="getOneThreeInfo"
    />
  </main>
</template>

<script setup>
import { ref, computed, reactive, watch } from 'vue'
import {
  getPracticeDetail,
  getQuestionList,
  getTaskUrge,
  getResponseOfDetail,
  getResponseStatistics
} from '@/apis/assignment'
import { useEcharts } from '@/hooks'
import { getNormalizeData, getParseData } from '@/utils/answer'
import { useAuthStore } from '@/stores'
import 'echarts/lib/component/dataZoom'
import AssignTopic from './AssignTopic.vue'
import router from '@/router'
import {
  rankMap,
  overviewCardList,
  handleRate,
  getColorByNum,
  getType6Text
} from '../util'
import { ElMessage } from 'element-plus'
import LIST from '@/assets/images/assignment/icon_add.svg?component'
import { cloneDeep } from 'lodash'
import CreateTargetClass from '@/views/class-manage/cpns/CreateTargetClass.vue'
import ProcessList from './ProcessList.vue'
import ImagePreview from '@/components/picture-preview/ImagePreview.vue'
import OneWinThreeDrawer from '../one-three/OneWinThreeDrawer.vue'
import { CORRECT_TYPE } from '../single-correct/data'

const props = defineProps({
  taskInfo: {
    type: Object,
    required: true
  },
  classSelect: {
    required: false
  }
})
const emit = defineEmits(['getOneTreeInfo'])

const { userInfo } = useAuthStore()
const selectClass = ref(null)

/**
 * ------------柱状图+题目列表
 */
const practiceChart = ref({})
let option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: param => {
      let { color } = param[0]
      let { showIndex, value, finishCount, incorrectCount } = param[0].data
      return `
      <div style="width: 0.8rem; line-height: 1.6">
        <div class="flex-between">
          <div><span class="dot" style="
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 100%;
            background-color: red;
            display: inline-block;
            margin-right: 0.06rem;
            background-color: ${color};
        "></span>题号：</div>
          <span>${showIndex}</span>
        </div>
        <div class="flex-between">
          <div><span class="dot" style="
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 100%;
            background-color: red;
            display: inline-block;
            margin-right: 0.06rem;
            background-color: ${color};
        "></span>得分率：</div>
          <span>${value}%</span>
        </div>
        <div class="flex-between">
          <div><span class="dot" style="
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 100%;
            background-color: red;
            display: inline-block;
            margin-right: 0.06rem;
            background-color: ${color};
        "></span>完成人数：</div>
          <span>${finishCount}</span>
        </div>
        <div class="flex-between">
          <div><span class="dot" style="
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 100%;
            background-color: red;
            display: inline-block;
            margin-right: 0.06rem;
            background-color: ${color};
        "></span>错误人数：</div>
          <span>${incorrectCount}</span>
        </div>
      </div>
      `
    }
  },
  grid: {
    top: '16%',
    left: '0%',
    right: '4%',
    bottom: '6%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      },
      name: '题号'
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 100,
      name: '正确率 / %'
    }
  ],
  series: [
    {
      name: '正确率',
      type: 'bar',
      barWidth: '40px',
      label: {
        show: true,
        position: 'top',
        color: '#000'
      },
      itemStyle: {
        color: ({ value }) => {
          return getColorByNum(value)
        }
      },
      data: []
    }
  ],
  dataZoom: []
})

/* eslint-enable */
const { chartInstance } = useEcharts(practiceChart, option)

// 题目列表
const questionList = ref([])
const curQuestionIndex = ref(0) // 大题索引
const curQuestionSubIndex = ref(-1) // 小题索引
const curQuestionInfo = ref(null) // 显示的题目
const processList = ref([]) // 作答详情列表

const TopicData = computed(() => {
  let res = cloneDeep(curQuestionInfo.value?.question_detail)
  if (curQuestionSubIndex.value !== -1) {
    res.subproblem = res.subproblem.splice(curQuestionSubIndex.value, 1)
  }
  return res
})

const onClickQuestionIndex = index => {
  curQuestionIndex.value = index

  // 选中子题目
  curQuestionSubIndex.value = -1
  let question = questionList.value[curQuestionIndex.value]

  if (question.parentId) {
    let parentQuestion = questionList.value.find(
      item => item?.question_id === question.parentId
    )
    curQuestionSubIndex.value = question.index
    curQuestionInfo.value = parentQuestion
  } else {
    curQuestionInfo.value = question
  }

  getResponseStatisticsInfo()
}

// 0-蓝 1-深绿 2-红 3-灰 4-浅绿
const getStatus = (num, isAwaitGrade) => {
  let status = 2
  switch (true) {
    case num >= 0.8:
      status = 1
      break
    case num >= 0.6:
      status = 4
      break
    default:
      status = 2
  }
  status = isAwaitGrade ? 3 : status
  return status
}
// 查看任务下的题目
const getQuestionListInfo = async () => {
  let param = {
    task_id: props.taskInfo.taskId,
    class_id: selectClass.value.value,
    class_type: selectClass.value.class_type
  }
  const res = await getQuestionList(param)
  let list = (res.data || []).map((question, index) => {
    let resItem = {
      index,
      showIndex: index + 1,
      parentId: 0,
      status: getStatus(
        question.score_rate,
        !question.submit_count || question.submit_count === question.await_grade
      ),
      ...question
    }
    let list = []
    if (
      question.question_detail.subproblem &&
      question.question_detail.subproblem.length
    ) {
      list = question.question_detail.subproblem.map(
        (subQuestion, subIndex) => {
          let childQuestion = question.child_question[subIndex]
          return {
            index: subIndex,
            showIndex: index + 1 + '-' + (subIndex + 1),
            parentId: question.question_detail.id,
            status: getStatus(
              childQuestion.score_rate,
              !childQuestion.submit_count ||
                childQuestion.submit_count === childQuestion.await_grade
            ),
            ...childQuestion,
            ...subQuestion
          }
        }
      )
    }
    return [resItem, ...list]
  })
  questionList.value = list.flat()
  let xData = questionList.value.map(item => item.showIndex)
  let seriesData = questionList.value.map(item => ({
    showIndex: item.showIndex,
    value: (item.score_rate * 100).toFixed(0),
    finishCount: item.finish_count,
    incorrectCount: item.incorrect
  }))
  option.xAxis[0].data = xData
  option.series[0].data = seriesData
  if (questionList.value.length >= 20) {
    option.dataZoom[0] = {
      type: 'slider',
      start: '0',
      end: '50',
      height: '10%',
      bottom: 20,
      show: true
    }
    option.grid.bottom = '26%'
  }
  if (questionList.value.length) {
    onClickQuestionIndex(0)
  }
}

// 右侧作答详情
const getResponseStatisticsInfo = async () => {
  processList.value = []

  // 选中大小题里面的大题不显示
  if (
    curQuestionInfo.value.question_detail.subproblem?.length &&
    curQuestionSubIndex.value === -1
  ) {
    return
  }

  let realQuestion =
    curQuestionSubIndex.value === -1
      ? curQuestionInfo.value.question_detail
      : curQuestionInfo.value.question_detail.subproblem[
          curQuestionSubIndex.value
        ]
  // 题目类型
  const res = await getResponseStatistics({
    task_id: props.taskInfo.taskId,
    class_id: selectClass.value.value,
    class_type: selectClass.value.class_type,
    question_id: realQuestion.id || realQuestion.question_id,
    item_type: curQuestionSubIndex.value === -1 ? 1 : 2
  })

  let { correct_answer } = realQuestion
  correct_answer = correct_answer ? correct_answer.join('') : ''

  const data = res.data?.result || {}
  const list = Object.keys(data)

  processList.value = list.map(key => {
    let param = {
      key,
      isCorrect: false,
      list: data[key].list,
      statistics_type: res.data.statistics_type
    }
    switch (param.statistics_type) {
      case 1:
      case 2:
      case 3:
        param.text = key === 'other' ? '其他' : key
        param.isCorrect = key == correct_answer
        break
      case 4:
        param.text = key === 'correct' ? '选: 对/T' : '选: 错/F'
        param.isCorrect =
          (key === 'correct' && correct_answer[0] == 0) ||
          (key === 'wrong' && correct_answer[0] == 1)
        break
      case 5:
        param.text = rankMap[key]
        break
      case 6:
        param.text = getType6Text(key, res.data.set_total_score)
    }
    return param
  })
  // statistics_type = 2/3如果没有正确答案行需要也需要显示
  if (
    processList.value.length &&
    (processList.value[0].statistics_type === 2 ||
      processList.value[0].statistics_type === 3) &&
    processList.value.findIndex(item => item.isCorrect) === -1
  ) {
    processList.value = [
      {
        isCorrect: true,
        key: correct_answer,
        list: [],
        statistics_type: processList.value[0].statistics_type,
        text: correct_answer
      },
      ...processList.value
    ]
  }
}

/**
 * --------------------点击作答详情业务
 */
const drawerVis = ref(false)
// 答题列表
const answerList = ref([])
/**
 * 题目的作答详情
 */
const getResponseOfDetailInfo = async () => {
  let question_id =
    curQuestionSubIndex.value === -1
      ? questionList.value[curQuestionIndex.value].question_detail.id
      : curQuestionInfo.value.question_detail.subproblem[
          curQuestionSubIndex.value
        ].id
  const res = await getResponseOfDetail({
    task_id: props.taskInfo.taskId,
    class_id: selectClass.value.value,
    class_type: selectClass.value.class_type,
    question_id,
    item_type: curQuestionSubIndex.value === -1 ? 1 : 2
  })
  answerList.value = res.data.map(student => ({
    ...student,
    key: student.student_id,
    studentName: student.student_name,
    gradeId: student.grade_id,
    showMore: false
  }))
}
const onOpenDetail = async () => {
  await getResponseOfDetailInfo()
  drawerVis.value = true
}
/**
 * 加入靶向班参数
 */
const selectStudentList = ref([])
const createVisible = ref(false)
const onSelectStudent = list => {
  selectStudentList.value = list
}
const handleClose = () => {
  createVisible.value = false
  selectStudentList.value = []
  drawerVis.value = false
}
const isShowImagePreview = ref(false)
const imagesUrl = ref([])
const imageIndex = ref(0)
const onShowPreview = (urls, index) => {
  imagesUrl.value = urls
  imageIndex.value = index
  isShowImagePreview.value = true
}

/**
 * --------------------四个板块
 */
const overviewList = ref(cloneDeep(overviewCardList))
/* eslint-enable */
// 学生列表
const studentList = ref([
  {
    bg1: '#F7F9FF',
    bg2: 'rgba(84, 102, 231, 0.1)',
    color: '#5466E7',
    text: '未完成',
    list: []
  },
  {
    bg1: '#F3FDFA',
    bg2: 'rgba(12, 197, 141, 0.1)',
    color: '#0CC58D',
    text: '已完成',
    list: []
  }
])
// 获取习题&错题详情
/* eslint-disable */
const sum = ref(0)
const getPracticeDetailInfo = async () => {
  const res = await getPracticeDetail({
    task_id: props.taskInfo.taskId,
    class_id: selectClass.value.value,
    class_type: selectClass.value.class_type
  })
  const {
    task_statistics,
    submit_list,
    un_submit_list,
    grade_list,
    un_grade_list
  } = res.data

  // 第一个板块
  overviewList.value[0].rate = handleRate(task_statistics.submit_rate)
  overviewList.value[0].list[0].num = submit_list.total
  overviewList.value[0].list[1].num = un_submit_list.total
  overviewList.value[0].list[1].list = un_submit_list.list
  sum.value = submit_list.total + un_submit_list.total

  // 第二个板块
  overviewList.value[1].rate = handleRate(task_statistics.score_rate)
  overviewList.value[1].list[0].num = handleRate(task_statistics.high_rate)
  overviewList.value[1].list[1].num = handleRate(task_statistics.low_rate)

  // 第三个板块
  overviewList.value[2].rate = handleRate(task_statistics.objective_rate)
  overviewList.value[2].list[0].num = handleRate(
    task_statistics.objective_high_rate
  )
  overviewList.value[2].list[1].num = handleRate(
    task_statistics.objective_low_rate
  )

  // 第四个板块
  overviewList.value[3].rate = handleRate(task_statistics.complete_rate)
  overviewList.value[3].list[0].num = grade_list.total
  overviewList.value[3].list[1].num = un_grade_list.total
  overviewList.value[3].list[1].list = un_grade_list.list

  //学生列表
  studentList.value[0].list = un_submit_list.list.map(student => ({
    studentId: student.student_id,
    studentName: student.student_name
  }))
  studentList.value[1].list = submit_list.list.map(student => ({
    studentId: student.student_id,
    studentName: student.student_name
  }))
  await getQuestionListInfo()
}
/**
 *  催交作业
 */
const onTaskUrge = async () => {
  const res = await getTaskUrge({
    task_id: props.taskInfo.taskId
  })
  if (res.code === 1) {
    ElMessage.success('催交成功！')
  }
}
const toCorrect = () => {
  if (props.taskInfo.correct_type === CORRECT_TYPE.SCORE) {
    router.push({
      name: 'singleCorrect',
      query: {
        taskId: props.taskInfo.taskId
      }
    })
    return
  }
  router.push({
    name: 'detailCorrect',
    query: {
      taskId: props.taskInfo.taskId,
      name: props.taskInfo.name,
      activeClassId: selectClass.value.value,
      classList: JSON.stringify(
        props.taskInfo.classList.map(item => ({
          classId: item.value,
          className: item.label,
          class_type: item.class_type
        }))
      )
    }
  })
}
const onDownLoadFile = () => {
  props.taskInfo.fileList.forEach((file, index) => {
    let iframe = document.createElement('iframe')
    iframe.src = file.url
    iframe.id = 'download_iframe_' + index
    iframe.style.display = 'none'
    document.body.appendChild(iframe)
  })
  setTimeout(() => {
    props.taskInfo.value.fileList.forEach(index => {
      let iframe = document.getElementById('download_iframe_' + index)
      if (iframe) {
        document.body.removeChild(iframe)
      }
    })
  }, 5000)
}

/**
 * 举一反三
 */

const isShowOne = ref(false)
const oneThreeStudent = ref([[], [], []])
const onShowOneTwoThree = () => {
  isShowOne.value = true
}

const getOneStudent = () => {
  let list = [[], [], []] // 对 错 半对
  if (processList.value.length) {
    const { statistics_type } = processList.value[0]
    if (statistics_type !== 5) {
      processList.value.forEach(process => {
        if (process.isCorrect) {
          list[0].push(...process.list)
        } else {
          list[1].push(...process.list)
        }
      })
    } else {
      processList.value.forEach(process => {
        if (process.key === 'all_correct') {
          list[0].push(...process.list)
        } else if (process.key === 'incorrect') {
          list[1].push(...process.list)
        } else if (process.key === 'part_correct') {
          list[2].push(...process.list)
        }
      })
    }
  }
  list.forEach(
    (listItem, index) =>
      (oneThreeStudent.value[index] = listItem.map(item => ({
        student_name: item.student_name,
        student_id: item.student_id
      })))
  )
  return list
}
const getOneThreeInfo = param => {
  emit('getOneThreeInfo', {
    questionList: param.questionList,
    studentList: getOneStudent()
  })
}
// 是否需要展示举一反三按钮入口
// 满足小题和 产生学生提交已批改的学生数据
const isTopicOne = computed(() => {
  if (
    props.taskInfo.taskType === 3 ||
    (curQuestionInfo.value.question_detail.subproblem?.length >= 0 &&
      curQuestionSubIndex.value === -1)
  ) {
    return false
  }
  let list = getOneStudent()
  return list.findIndex(item => item.length) >= 0
})

watch(
  () => props,
  newVal => {
    selectClass.value = newVal.classSelect
    getPracticeDetailInfo()
  },
  {
    deep: true
  }
)

const initData = () => {
  if (props.taskInfo.taskType == 2) {
    selectClass.value = props.classSelect
  } else {
    selectClass.value = props.taskInfo.classList[0]
  }
  getPracticeDetailInfo()
}
initData()

const goComment = () => {
  const newRoute = router.resolve({
    path: '/comment',
    query: {
      class_id: selectClass.value.value,
      task_id: props.taskInfo.taskId,
      class_type: selectClass.value.class_type
    }
  })
  window.open(newRoute.href, '_blank')
}
</script>

<style lang="less" scoped>
.finish-practice-container {
  .overview-box {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 0 20px;

    .card-list {
      margin-top: 20px;
      gap: 20px;
      margin-bottom: 20px;

      .card-item {
        flex: 1;
        padding: 20px;

        .card-info {
          height: 50px;
          gap: 20px;
          margin-bottom: 16px;
          position: relative;

          .card-img {
            height: 100%;
          }

          .info-right {
            height: 100%;
            justify-content: space-between;
            .rate-num {
              font-size: 26px;
              font-weight: bold;
            }
          }

          .push-btn {
            background-color: #fff;
            color: #ea4338;
            border: unset;
            position: absolute;
            right: 0;
            top: 0;
          }

          .correct-btn {
            color: #0cc58d;
          }
        }

        .card-bottom {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }

    .student-box {
      border-radius: 14px;
      padding: 20px;
      margin-bottom: 20px;
      position: relative;

      .sign-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 104px;
        text-align: center;
        line-height: 2;
        border-radius: 14px 0;
      }

      .student-list {
        margin-top: 20px;
        flex-wrap: wrap;
        gap: 10px;

        .student-item {
          padding: 0 4px;
        }

        .student-item-active {
          background-color: rgb(84 102 231 / 0.1);
          color: rgb(84 102 231);
          border-radius: 4px;
        }
      }
    }

    :deep(.el-empty) {
      padding: 0 !important;
    }
  }

  .practice-chart {
    height: 220px;
    width: calc(100vw - 320px);
    .tool-tip {
      width: 140px;
      .dot {
      }
    }
  }

  .question-box {
    background-color: #fff;
    padding: 20px;
    padding-top: 12px;
    margin: 20px 0;
    gap: 20px;

    .question-index {
      flex-wrap: wrap;
      gap: 16px;

      .comment {
        cursor: pointer;
        display: flex;
        align-items: center;

        img {
          width: 86px;
        }
      }

      .index-item {
        min-width: 24px;
        height: 24px;
        border-radius: 5px;
        border: 1px solid black;
        text-align: center;
        line-height: 24px;
        display: inline-block;
        padding: 0 4px;
      }
      .index-item-0 {
        color: #5466e7;
        border-color: #5466e7;

        &:hover {
          background-color: #e9eeff;
          border-color: #e9eeff;
        }
      }
      .index-item-0-active {
        height: 30px;
        min-width: 24px;
        margin-top: 2px;
        border: unset;
        color: #fff;
        background: url('@/assets/images/assignment/index-0-active.png')
          no-repeat;
        background-size: 100% 100%;
      }

      .index-item-1 {
        color: #0cc58d;
        border-color: #0cc58d;
        background-color: #fff;

        &:hover {
          background-color: rgb(12 197 141 / 0.19);
          border-color: rgb(12 197 141 / 0.19);
        }
      }

      .index-item-1-active {
        height: 30px;
        min-width: 24px;
        transform: translateY(2px);
        border: unset;
        color: #fff;
        background: url('@/assets/images/assignment/index-1-active.png')
          no-repeat;
        background-size: 100% 100%;
      }

      .index-item-2 {
        color: #ea4338;
        border-color: #ea4338;

        &:hover {
          background-color: #fbd9d7;
          border-color: #fbd9d7;
        }
      }

      .index-item-2-active {
        height: 30px;
        min-width: 24px;
        transform: translateY(2px);
        border: unset;
        color: #fff;
        background: url('@/assets/images/assignment/index-2-active.png')
          no-repeat;
        background-size: 100% 100%;
      }

      .index-item-3 {
        color: #d2c2bc;
        border-color: #d2c2bc;

        &:hover {
          background-color: #eaeaeb;
          border-color: #eaeaeb;
        }
      }

      .index-item-3-active {
        height: 30px;
        min-width: 24px;
        margin-top: 2px;
        border: unset;
        color: #fff;
        background: url('@/assets/images/assignment/index-3-active.png')
          no-repeat;
        background-size: 100% 100%;
      }

      .index-item-4 {
        color: #81d659;
        border-color: #81d659;

        &:hover {
          background-color: #e6f7de;
          border-color: #e6f7de;
        }
      }

      .index-item-4-active {
        height: 30px;
        min-width: 24px;
        margin-top: 2px;
        border: unset;
        color: #fff;
        background: url('@/assets/images/assignment/index-4-active.png')
          no-repeat;
        background-size: 100% 100%;
      }
    }

    .border {
      margin: 10px 0;
    }

    .question-detail-box {
      gap: 30px;
      margin-top: 20px;
      align-items: flex-start;

      .box-left {
        flex: 1;
        overflow: hidden;
      }

      .box-right {
        width: 420px;
        border-radius: 14px;
        border: 1px #cdced1 solid;
        padding: 20px;
        .first-question {
          color: #b7b8bb;
          height: 100%;
          min-height: 120px;
          line-height: 120px;
          text-align: center;
        }
      }
    }
  }
}
</style>
<style lang="less">
.finish-drawer {
  .el-drawer__header {
    margin-bottom: unset !important;
  }
  .cell {
    text-align: center;
  }
  .answer-column {
    max-height: 400px;
  }
  .show-more-btn {
    margin-top: 10px;
  }
}

.pop-class {
  width: unset !important;
  .student-list {
    max-width: 400px !important;
    gap: 10px;
    flex-wrap: wrap;
  }
}
</style>
